import { Col, ConfigProvider, Divider, Flex, Modal, Row, Space, Steps, Typography } from 'antd';
import { useIntl } from 'umi';

import { formatNumber, openUrl } from '@/utils';
import dayjs from 'dayjs';
import { useMemo } from 'react';

import arrow from '@/assets/apply_arrow.png';
import close from '@/assets/close.png';
import down from '@/assets/produdct_donw.png';
import { customer } from '@/components/TopInfo/data';
import { statusList, typeColor } from '@/utils/common';
import parser from 'react-html-parser';

type Props = {
  visible: boolean;
  handleCancel: () => void;
  record: Partial<Center.Record>;
};
const ApplyDetail: React.FC<Props> = ({ record, visible, handleCancel }) => {
  const intl = useIntl();
  const {
    typeName,
    statusName,
    statusArray,
    merchantLogo,
    productName,
    productType,
    orderNo,
    createdDate,
    applyAmount,
    applyTerm,
    platformRebate,
    loanAmount,
    loanTerm,
    interest,
    orderUserStatus,
    id,
  } = record;
  const { bgColor, color } = statusList(orderUserStatus) || {};
  const { color: typeColors, bgColor: typeBgColor } =
    typeColor.find((item) => item.key == productType) || {};
  const list = useMemo(
    () => [
      {
        title: 'center.apply_info',
        list: [
          {
            lable: 'home.apply_amout',
            value: formatNumber((applyAmount || 0).toFixed(2), false),
            val: applyAmount,
          },
          {
            lable: 'home.apply_term',
            value: intl.formatMessage({ id: 'center.how_month' }, { num: applyTerm }),
            val: applyTerm,
          },
        ],
      },
      ...(!['6'].includes(orderUserStatus)
        ? []
        : [
            {
              title: 'center.apply_get_info',
              list: [
                {
                  lable: 'home.apply_loan_amount',
                  value: formatNumber((loanAmount || 0).toFixed(2), false),
                  val: loanAmount,
                },
                {
                  lable: 'home.apply_loan_term',
                  value: intl.formatMessage({ id: 'center.how_month' }, { num: loanTerm }),
                  val: loanTerm,
                },
                {
                  lable: 'home.apply_loan_rate',
                  value: `${interest}%`,
                  val: interest,
                },
              ],
            },
          ]),
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [record, orderUserStatus],
  );

  const items = statusArray?.map((item: any) => {
    const { title, status, time } = item;
    return {
      title: title,
      description: time ? dayjs(time).format('YYYY-MM-DD') : '',
      status: time ? (status == '1' ? 'error' : 'finish') : '',
    };
  });
  const wordList = ['home.apply_loan_table', 'home.apply_loan_img'];
  return (
    <Modal
      className="apply_modal"
      footer={false}
      width={700}
      closeIcon={null}
      open={visible}
      destroyOnClose
    >
      <img
        src={close}
        onClick={handleCancel}
        width={46}
        style={{ top: 0, right: -60, position: 'absolute', cursor: 'pointer' }}
      />
      <div className="apply_modal_top">
        <Flex justify="space-between" align="center" gap={20}>
          <Flex flex={1} style={{ overflow: 'hidden' }} align="center" gap={8}>
            <div
              style={{ padding: '0 3px', height: '26px', background: '#FFFFFF', borderRadius: 4 }}
            >
              <img src={merchantLogo} height={23} />
            </div>

            <Typography.Text
              ellipsis={{ tooltip: productName }}
              style={{
                fontSize: 26,
                color: '#fff',
                fontWeight: 'bold',
                whiteSpace: 'nowrap',
              }}
            >
              {productName}
            </Typography.Text>

            <div
              style={{
                whiteSpace: 'nowrap',
                padding: '5px 25px ',
                color: typeColors,
                marginLeft: 5,
                borderRadius: 8,
                backgroundColor: typeBgColor,
              }}
            >
              {typeName}
            </div>
          </Flex>
          <div
            style={{
              padding: '9px 25px ',
              color,
              backgroundColor: bgColor,
              borderRadius: 8,
              whiteSpace: 'nowrap',
            }}
          >
            {statusName}
          </div>
        </Flex>

        <Flex align="center" style={{ color: '#fff', marginTop: 9 }}>
          <div>
            {intl.formatMessage({ id: 'center.apply_id' })}：{orderNo}
          </div>
          <Divider className="apply_modal_top_line" type="vertical" />
          <div>
            {intl.formatMessage({ id: 'center.apply_time' })}：
            {dayjs(createdDate).format('YYYY-MM-DD HH:mm:ss')}
          </div>
        </Flex>
        <Space style={{ color: '#fff', marginTop: 4 }} size={0}>
          <div style={{ marginRight: 3 }}>
            {intl.formatMessage({ id: 'home.apply_follow_manager' })}
          </div>
          {customer}
        </Space>
      </div>
      <div className="apply_modal_content">
        <Row gutter={[0, 24]} style={{ flexDirection: 'column' }}>
          {list.map((item) => {
            const { title, list } = item;
            return (
              <Row key={title} gutter={[0, 16]} style={{ flexDirection: 'column' }}>
                <div className="apply_modal_content_title">{intl.formatMessage({ id: title })}</div>

                {list.map((item) => {
                  const { value, lable, val } = item;
                  return (
                    <Row align="middle" key={lable} justify="space-between">
                      <Col style={{ color: '#666' }}>{intl.formatMessage({ id: lable })}</Col>
                      <Col style={{ fontSize: 20, color: '#333' }}>{val ? value : '--'}</Col>
                    </Row>
                  );
                })}
              </Row>
            );
          })}
        </Row>
        {/* 步骤 */}
        <div className="apply_modal_content_step">
          <div className="apply_modal_content_step_title">
            {intl.formatMessage({ id: 'home.apply_loan_step' })}
          </div>
          <div className="apply_modal_content_step_card">
            <ConfigProvider
              theme={{
                components: {
                  Steps: {
                    /* 这里是你的组件 token */
                    dotSize: 20,
                    dotCurrentSize: 20,
                  },
                },
              }}
            >
              <Steps progressDot={true} items={items} />
            </ConfigProvider>
          </div>
        </div>
        {/* 平台 */}
        <div className="apply_modal_content_step apply_modal_content_platform">
          <div className="apply_modal_content_step_title">
            {intl.formatMessage({ id: 'home.apply_platformRebate' })}
          </div>
          <div className="apply_modal_content_platform_card ">
            <div style={{ fontWeight: 700 }}>
              【{intl.formatMessage({ id: 'home.platform_rebate' })}】
            </div>
            <div />
            <Typography.Paragraph
              style={{ marginBottom: 0 }}
              ellipsis={{
                rows: 4,
                expandable: 'collapsible',
                symbol(expanded) {
                  return (
                    <img
                      src={down}
                      width={10}
                      height={10}
                      className={`product_content_right_card_icon ${expanded ? 'rote' : ''}`}
                    />
                  );
                },
              }}
            >
              {parser(platformRebate)}
            </Typography.Paragraph>
          </div>
        </div>

        <div className="apply_modal_content_step">
          <div className="apply_modal_content_step_title">
            {intl.formatMessage({ id: 'home.apply_loan_data' })}
          </div>
          <Flex style={{ flexDirection: 'column' }} gap={16}>
            {wordList.map((item, index) => {
              return (
                <Flex key={item} align="center" justify="space-between">
                  <div style={{ color: '#666' }}>{intl.formatMessage({ id: item })}</div>
                  <Flex
                    align="center"
                    gap={8}
                    onClick={() => {
                      const params = encodeURIComponent(
                        `id=${id}&index=${index}&logo=${merchantLogo}&typeName=${typeName}&statusName=${statusName}`,
                      );
                      openUrl(`/orderDetail?${params}`);
                    }}
                    style={{ cursor: 'pointer' }}
                  >
                    <div style={{ fontSize: 16, color: '#0065fd' }}>
                      {intl.formatMessage({ id: 'home.apply_check_detail' })}
                    </div>
                    <img src={arrow} width={6} height={14} />
                  </Flex>
                </Flex>
              );
            })}
          </Flex>
        </div>
      </div>
    </Modal>
  );
};

export default ApplyDetail;
